<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .top {
            display: flex;
            flex: 3;
        }
        .top > div {
            flex: 1;
        }
        .bottom {
            flex: 2.4;
            display: flex;
        }
        .bottom>.chartBox{
            flex: 1;
        }
    </style>
</head>
<body id="03_03zichanfengxian" data-title="管理风险">
<div class="container">
    <h2 hidden>管理风险</h2>
    <header class="pageHeader">
        <div class="inputGroup">
            <label for="pingtai">平台：</label>
            <div class="mySelect" id="pingtai">
                <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                <ul class="myOptionBox">
                    <li class="myOption selected">鲁金宝</li>
                    <li class="myOption">鲁金宝1</li>
                    <li class="myOption">鲁金宝2</li>
                </ul>
            </div>
        </div>
    </header>
    <div class="top">
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>资产与负债</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-2">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>拨备覆盖</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-3">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>展期业务</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="top">
        <div class="top-4">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>投资业务</h3>
                </div>

                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness4"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="top-5">
            <div class="chartBox ec002">
                <div class="chartTitle">
                    <h3>贷款余额</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="inputGroup">
                            <label for="danbaofangsi">筛选条件：</label>
                            <div class="mySelect" id="danbaofangsi">
                                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                </div>
                                <ul class="myOptionBox">
                                    <li class="myOption selected">担保方式</li>
                                    <li class="myOption">担保方式1</li>
                                    <li class="myOption">担保方式2</li>
                                </ul>
                            </div>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitivenes5"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-6">
            <div class="chartBox ec0302">
                <div class="chartTitle">
                    <h3>近12个月的放款额</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="inputGroup">
                            <label for="fangkuanedu">筛选条件：</label>
                            <div class="mySelect" id="fangkuanedu">
                                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                </div>
                                <ul class="myOptionBox">
                                    <li class="myOption selected">担保方式</li>
                                    <li class="myOption">担保方式1</li>
                                    <li class="myOption">担保方式2</li>
                                </ul>
                            </div>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec0302_currentCompetitiveness6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="chartBox ec002">
            <div class="chartTitle">
                <h3>管理风险列示</h3>
            </div>
            <div class="chartContent">
						<table>
							<thead>
							<tr><th>报警时间</th><th>预警指标</th><th>预警原因</th><th>平台名称</th><th>业务详述</th></tr>
							</thead>
							<tbody>
							<tr><td>20180307 11:28:01</td><td>信用风险</td><td>借款集中度</td><td>鲁金宝</td><td class="more"><a href=""> 查看</a></td></tr>
							<tr><td>20180307 11:28:01</td><td>信用风险</td><td>借款集中度</td><td>鲁金宝</td><td class="more"><a href=""> 查看</a></td></tr>
							<tr><td>20180307 11:28:01</td><td>信用风险</td><td>借款集中度</td><td>鲁金宝</td><td class="more"><a href=""> 查看</a></td></tr>
							</tbody>
						</table>
					</div>
			</div>
    </div>
</div>
<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];
    $(function () {
//资产与负债  模块一
        var myChart1 = echarts.init($("#ec0302_currentCompetitiveness1")[0]);
        myChart1.setOption(opt_line);
        myChart1.setOption(opt_bar_vertical);
        myChart1.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '15%',
                top: '30%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    nameGap: 18 * bodyScale
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额',
                    interval: 15,
                    nameGap: 4 * bodyScale
                },
                {
                    type: 'value',
                    name: '利率',
                    interval: 15,
                    axisLine: { //坐标轴
                        lineStyle: {
                            color: "#369"
                        }
                    },
                    splitLine: { //分割线
                        lineStyle: {
                            color: "#369"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '资产',
                    type: 'bar',
                    data: [57, 60, 38, 57, 60, 65],
                    barWidth: 15
                },
                {
                    name: '负债金额',
                    type: 'line',
                    data: [53, 48, 51, 55, 59, 58],
                    symbol: 'circle'

                },
                {
                    name: '对外担保额',
                    type: 'line',
                    data: [35, 35, 39, 43, 45, 48],
                    // color:'#ffd769',
                    symbol: 'circle'
                },
                {
                    name: '资金充足率',
                    type: 'line',
                    data: [34, 39, 41, 47, 53, 62],
                    symbol: 'circle',
                    yAxisIndex: 1
                }
            ]
        });
//拨备覆盖  模块二
        var myChart2 = echarts.init($("#ec0302_currentCompetitiveness2")[0]);
        myChart2.setOption(opt_bar_horizon);
        myChart2.setOption(opt_line);
        myChart2.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '15%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '金额',
                    type: 'value',
                    interval: 15
                }
            ],
            series: [
                {
                    name: '风险货款额',
                    type: 'bar',
                    data: [60, 45, 39, 28, 47, 65],
                    barWidth: 15
                },
                {
                    name: '拨备金金额',
                    type: 'line',
                    data: [39, 30, 22, 17, 36, 49],
                    symbol: 'circle'
                }
            ]

        });
// 投资业务  模块三
        var myChart3 = echarts.init($("#ec0302_currentCompetitiveness3")[0]);
        myChart3.setOption(opt_bar_horizon);
        myChart3.setOption(opt_line);
        myChart3.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '15%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6']
                }
            ],
            yAxis: [
                {
                    name: '金额',
                    type: 'value',
                    interval: 15,
                    right: '15%'
                }
            ],
            series: [
                {
                    name: '本月货款发生额',
                    type: 'bar',
                    data: [60, 45, 39, 28, 47, 65],
                    barWidth: 15
                },
                {
                    name: '本期展期货款额度',
                    type: 'line',
                    data: [55, 39, 22, 17, 45, 59],
                    color: '#ffd769',
                    symbol: 'circle'
                }
            ]
        });
//投资业务  模块四;
        var myChart4 = echarts.init($("#ec0302_currentCompetitiveness4")[0]);
        myChart4.setOption(opt_bar_horizon);
        myChart4.setOption(opt_line);
        myChart4.setOption({
            grid: {
                left: '10%',
                right: '15%',
                bottom: '15%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '金额',
                    type: 'value',
                    interval: 15
                }
            ],
            series: [
                {
                    name: '资本额',
                    type: 'bar',
                    data: [60, 45, 39, 38, 47, 65],
                    barWidth: 15
                },
                {
                    name: '投资额',
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle'
                }
            ]
        });
//货款余额  模块五
        var myChart5 = echarts.init($("#ec0302_currentCompetitivenes5")[0]);
        myChart5.setOption(opt_pie);
        var option = {
            legend: {
                // orient: 'vertical',
                show: false
            },
            series: [
                {
                    name: '访问来源',
                    label: {
                        fontSize: 10 * bodyScale
                    },
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '54%'],
                    data: [
                        {value: 335, name: '担保方式1'},
                        {value: 310, name: '担保方式2'},
                        {value: 234, name: '担保方式3'},
                        {value: 135, name: '担保方式4'},
                        {value: 135, name: '担保方式5'}
                    ]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart5.setOption(option);
        }
// 12月的放款额  模块六
        var myChart6 = echarts.init($("#ec0302_currentCompetitiveness6")[0]);
        myChart6.setOption(opt_bar_horizon);
        myChart6.setOption(opt_line);
        myChart6.setOption({
            legend: {
                // orient: 'vertical',
                right: 0,
                itemGap: 2,
                data: ['担保方式1', '担保方式2', '担保方式3']
            },
            grid: {
                left: '10%',
                right: '15%',
                bottom: '15%',
                top: '20%'
            },
            xAxis: {
                name: '月份',
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6']

            },
            yAxis: {
                name: '金额',
                type: 'value'
            },
            series: [
                {
                    name: '担保方式1',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#00adef'
                        }
                    },
                    barWidth: 15,
                    data: [120, 102, 101, 134, 190, 130]
                },
                {
                    name: '担保方式2',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#ffd769'
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230]
                },
                {
                    name: '担保方式3',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#73d13d'
                        }
                    },
                    data: [120, 182, 191, 134, 190, 130]
                }
            ]
        });
//本页所有图表
        allCharts = [myChart1, myChart2, myChart3, myChart4, myChart5, myChart6];
    });
</script>
</body>
</html>
